<template>
	<view class="splash-container">
		<!-- 背景动画元素 -->
		<view class="animated-bg">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
			<view class="particles">
				<view class="particle" v-for="i in 20" :key="i"></view>
			</view>
		</view>
		
		<view class="splash-content">
			<!-- Logo带动画 -->
			<view class="logo-container">
				<image class="logo" src="/static/images/AppLogo.png" mode="aspectFit"></image>
				<view class="logo-glow"></view>
			</view>
			
			<!-- 应用名称带动画效果 -->
			<view class="app-name-container">
				<view class="app-name">猪猪记账本</view>
				<view class="app-slogan">轻松记账，智慧理财</view>
			</view>
			
			<!-- 加载动画 -->
			<view class="loading-container">
				<view class="loading-bar">
					<view class="loading-progress" :style="{ width: loadingProgress + '%' }"></view>
				</view>
				<text class="loading-text">{{ loadingText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timer: null,
			loadingProgress: 0,
			loadingText: '正在启动...',
			loadingTexts: ['正在启动...', '加载资源...', '即将进入...', '准备就绪']
		}
	},
	onLoad() {
		// 模拟加载进度
		this.simulateLoading();
		
		// 延迟2秒后跳转到首页
		this.timer = setTimeout(() => {
			// 检查是否已登录
			const token = uni.getStorageSync('Authorization');
			if (token) {
				// 已登录，跳转到首页
				uni.reLaunch({
					url: '/pages/index/index'  // 调试注释用，结束解开注释
				});
			} else {
				// 未登录，跳转到登录页
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
		}, 2500);
	},
	onUnload() {
		// 清除定时器
		if (this.timer) {
			clearTimeout(this.timer);
		}
	},
	methods: {
		// 模拟加载进度
		simulateLoading() {
			let progress = 0;
			let textIndex = 0;
			
			const interval = setInterval(() => {
				progress += Math.floor(Math.random() * 8) + 2;
				
				if (progress >= 100) {
					progress = 100;
					clearInterval(interval);
				}
				
				this.loadingProgress = progress;
				
				// 更新加载文本
				if (progress > 25 && textIndex === 0) {
					textIndex = 1;
					this.loadingText = this.loadingTexts[1];
				} else if (progress > 60 && textIndex === 1) {
					textIndex = 2;
					this.loadingText = this.loadingTexts[2];
				} else if (progress > 90 && textIndex === 2) {
					textIndex = 3;
					this.loadingText = this.loadingTexts[3];
				}
			}, 100);
		}
	}
}
</script>

<style lang="scss">
.splash-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg, #FFD84D 0%, #FF9500 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	
	// 背景动画元素
	.animated-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		
		.circle {
			position: absolute;
			border-radius: 50%;
			opacity: 0.3;
			
			&.circle-1 {
				width: 300rpx;
				height: 300rpx;
				background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
				top: -50rpx;
				right: -50rpx;
				animation: float 8s infinite ease-in-out;
			}
			
			&.circle-2 {
				width: 500rpx;
				height: 500rpx;
				background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
				bottom: -100rpx;
				left: -100rpx;
				animation: float 12s infinite ease-in-out reverse;
			}
			
			&.circle-3 {
				width: 200rpx;
				height: 200rpx;
				background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
				top: 30%;
				right: 10%;
				animation: float 10s infinite ease-in-out 2s;
			}
		}
		
		.particles {
			position: absolute;
			width: 100%;
			height: 100%;
			
			.particle {
				position: absolute;
				width: 8rpx;
				height: 8rpx;
				background-color: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				
				@for $i from 1 through 20 {
					&:nth-child(#{$i}) {
						left: random(100) * 1%;
						top: random(100) * 1%;
						opacity: random(10) * 0.1;
						transform: scale(random(10) * 0.3);
						animation: twinkle #{random(5) + 2}s infinite ease-in-out #{random(5)}s;
					}
				}
			}
		}
	}
	
	.splash-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
		width: 80%;
		
		.logo-container {
			position: relative;
			margin-bottom: 40rpx;
			
			.logo {
				width: 240rpx;
				height: 240rpx;
				animation: pulse 2s infinite alternate;
				z-index: 2;
				position: relative;
				border-radius: 50%;
			}
			
			.logo-glow {
				position: absolute;
				width: 280rpx;
				height: 280rpx;
				background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
				border-radius: 50%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				animation: glow 2s infinite alternate;
			}
		}
		
		.app-name-container {
			text-align: center;
			margin-bottom: 80rpx;
			
			.app-name {
				font-size: 60rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
				margin-bottom: 20rpx;
				letter-spacing: 4rpx;
				animation: fadeInUp 1s ease-out;
				// background: linear-gradient(to right, #ffffff, #ffcab2);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
			
			.app-slogan {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.9);
				animation: fadeInUp 1s ease-out 0.3s both;
				letter-spacing: 2rpx;
			}
		}
		
		.loading-container {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.loading-bar {
				width: 100%;
				height: 8rpx;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 4rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				
				.loading-progress {
					height: 100%;
					background: linear-gradient(to right, #FFFFFF, #FFE7B2);
					border-radius: 4rpx;
					transition: width 0.3s ease;
				}
			}
			
			.loading-text {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
				animation: fadeInOut 2s infinite;
			}
		}
	}
}

// 动画关键帧
@keyframes float {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-30rpx) scale(1.05);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1.05);
	}
}

@keyframes glow {
	0% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.9);
	}
	100% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInOut {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

@keyframes twinkle {
	0%, 100% {
		opacity: 0.2;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}
</style> 